<template>
    <div class="search">
        <div class="serachTop">
            <span class="back iconfont icon-fanhui" @click="onBack"></span>
            <div class="searchBox" >
                <input class="searchIpt iconfont icon-sousuo1" type="text"   placeholder="请输入商品名称" v-model="searchIpt">
            </div>
            <span class="onSearch" @click="tosearch">搜索</span>
        </div>
        <div class="history">
            <p class="historyTop">历史搜索</p>
            <p class="historyBot">暂无历史搜索</p>
        </div>

        <div class="list-right" >
          <div class="listContent" v-for="(item,index) in searchList" :key="index" @click="todetail(item)">
              <div class="listContentLeft">
                  <img class="img" :src="item.goodsImg">
                  <div class="name-price">
                      <span class="name">{{item.goodsName}}</span>
                      <span class="price">￥{{item.goodsPrice}}/斤</span>
                  </div>
              </div>

              <div class="listContentRight">
                  <span class="iconfont icon-jian1"></span>
                  <span class="num">0</span>
                  <span class="iconfont icon-jia"></span>
              </div>
          </div>
        </div>


        <!-- <div class="searchBot">
            <div class="searchBotL">
                <span class="iconfont icon-gouwuche1"></span>
                <span class="num">0</span>
            </div>

            <div class="searchBotR">
                <div class="totle">
                    <span class="totleL">合计:￥</span>
                    <span class="totleMony">29.00</span>
                </div>
                <div class="buy">去购物车</div>
            </div>

        </div> -->

    </div>
</template>

<script>
    export default {
        data() {
            return {
               searchIpt:'',
               searchList:''
            }
        },

        methods: {
            onBack(){
                this.$router.back()
            },

            tosearch(){
                this.keyword=this.searchIpt

                this.$axios.post('/zhouliang/api/goodsinfo/fuzzy',{
                    keyword:this.keyword
                })
                .then((res)=>{
                    console.log(res)

                    const {code,msg,list}=res
                    if(code==1){
                        this.searchList=list
                        
                    }else{
                        console.log(msg)
                    }
                })
            },
            todetail(item){                
                const goodsId=item._id        
                this.$router.push('/detail/'+goodsId)
            }

            
        },

        mounted() {
            
        },

    }
</script>

<style lang="scss" scoped>

.serachTop{
    height: 1rem;
    background-color: #3bc049;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .searchBox{
       
        
        .searchIpt{
            height: 0.5rem;
            border-radius: 0.5rem;
            width: 80%;
            outline: none;
            width: 6rem;
            border:none;
            color: rgb(184, 180, 180);
            font-size: 0.24rem;
            text-align: center;
        }
    }
    
    .back{
       color: white
    }
    .onSearch{
        color: white
    }
}

.history{
    padding:0 0.2rem;
    .historyTop{
        color: black;
        padding: 0.2rem 0;
    }
    .historyBot{
        color: rgb(180, 175, 175)
    }
}

// .searchBot{
//     width: 100vw;
//     height: 0.8rem;
//     background-color: white;
//     display: flex;
//     justify-content: space-between;
//     position: fixed;
//     bottom: 0;
//     left: 0;
//     // border-top: 1px solid rgb(212, 209, 209);

//     .searchBotL{
//         width: 0.8rem;
//         height: 0.8rem;
//         background-color: white;
//         border-radius: 50%;
//         margin-top: -0.3rem;
//         margin-left: 0.2rem;
//         position: relative;
//         border: 1px solid rgb(212, 209, 209);
//         text-align: center;
//         line-height: 0.8rem;

//         .num{
//             width: 0.4rem;
//             height: 0.4rem;
//             display: block;
//             position: absolute;
//             background-color: rgb(236, 75, 75);
//             border-radius: 50%;
//             text-align: center;
//             line-height: 0.4rem;
//             top: 0;
//             right: 0;


//         }
        

//         .iconfont{
//             font-size: 0.6rem;
//         }

//     }
//     .searchBotR{
//         display: flex;
//         align-items: center;
//         box-sizing: border-box;
        

//         .totle{
//             margin:0 0.2rem;

//             .totleMony{
//                 color: red;
//             }


//         }
//         .buy{
//            background-color: #3ac149;
//            font-size: 0.2rem;
//            padding: 0.2rem 0.3rem;
//            color: white;

//         }
//     }
// }


.list-right{
  width:100vw;

  right: 0;
  top: 0;
  background-color: white;
  top: 1.8rem;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  
  .listContent{
      display: flex;
      padding: 0.2rem 0.2rem;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #ebe8e8;

      .listContentLeft{
          display: flex;
          align-items: center;
          
          
          .img{
              width: 1.5rem;
              height: 1.5rem;
          }

          .name-price{
              margin-left: 0.3rem;
              display: flex;
              flex-direction: column;
          }
      }
      .listContentRight{
        
            .num{
                font-size: 0.35rem;
            }

            .iconfont{
              font-size: 0.4rem;
              padding: 0 0.2rem;
            }
            .icon-jia{
                color: #3bc049;
            }
            .icon-jian1{
                color: rgb(240, 233, 233);
            }
      }

  }
}


</style>